<template>
  <header class="header">
    <h1>todos</h1>
    <input v-model="isAll" id="toggle-all" class="toggle-all" type="checkbox" />
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model="task"
      @keydown.enter="enterFn"
    />
  </header>
</template>

<script>
/**
 * 需求1：点击全选 - 小选受影响
 * 1、声明一个计算属性isAll，然后双向绑定在全全选框中
 * 2、再set函数中，实现全选影响小选
 *   获取全选框的状态（set函数的参数即为全选框的状态值）
 *   循环获取到绑定小选框的属性，然后复制为全选的状态值
 *   要获取到showArr，需要通过父传子把数据传递过来
 */
export default {
  props: ["arr"],
  data() {
    return {
      task: "",
    };
  },
  methods: {
    enterFn() {
      //   console.log(this.task);
      this.$emit("addTaskEvent", this.task);
      this.task = "";
    },
  },
  computed: {
    isAll: {
      set(bool) {
        this.arr.forEach((item) => {
          item.isDone = bool;
        });
      },
      get() {
        return this.arr.every((item) => item.isDone === true);
      },
    },
  },
};
</script>